<template>
  <el-dialog
    class="devices-add"
    title="编辑设备"
    :visible.sync="dialogVisibleEdit"
    :before-close="closedDialog"
    width="800px"
    top="5vh"
  >
    <el-form
      v-if="deviceInfoForm"
      :model="deviceInfoForm"
      ref="ruleForm"
      :rules="rules"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item
            label="设备名称"
            prop="device_name"
            :label-width="formLabelWidth"
          >
            <el-input v-model="deviceInfoForm.device_name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="设备型号"
            prop="device_model"
            :label-width="formLabelWidth"
          >
            <el-input v-model="deviceInfoForm.device_model"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item
        label="生产厂家"
        prop="device_manufacturer"
        :label-width="formLabelWidth"
      >
        <el-input v-model="deviceInfoForm.device_manufacturer"></el-input>
      </el-form-item>

      <el-row>
        <el-col :span="8">
          <el-form-item
            label="出厂日期"
            prop="device_date_production"
            :label-width="formLabelWidth"
          >
            <el-date-picker
              v-model="deviceInfoForm.device_date_production"
              type="date"
              value-format="timestamp"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="投运日期"
            prop="device_date_service"
            :label-width="formLabelWidth"
          >
            <el-date-picker
              v-model="deviceInfoForm.device_date_service"
              type="date"
              value-format="timestamp"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="更换日期"
            prop="device_data_update"
            :label-width="formLabelWidth"
          >
            <el-date-picker
              v-model="deviceInfoForm.device_data_update"
              type="date"
              value-format="timestamp"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item
            label="数量"
            prop="device_count"
            :label-width="formLabelWidth"
          >
            <el-input v-model="deviceInfoForm.device_count"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item
            label="设备类型"
            prop="device_type"
            :label-width="formLabelWidth"
          >
            <el-input v-model="deviceInfoForm.device_type"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="所属部门"
            prop="device_department_id"
            :label-width="formLabelWidth"
          >
            <el-select
              v-model="deviceInfoForm.device_department_id"
              placeholder="请选择"
            >
              <el-option
                v-for="item in departmentList"
                :key="item.id"
                :label="item.departname"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item
            label="设备位置"
            prop="device_position"
            :label-width="formLabelWidth"
          >
            <el-input v-model="deviceInfoForm.device_position"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item
            label="运行状态"
            prop="device_status"
            :label-width="formLabelWidth"
          >
            <el-radio v-model="deviceInfoForm.device_status" :label="0"
              >正常</el-radio
            >
            <el-radio v-model="deviceInfoForm.device_status" :label="1"
              >异常</el-radio
            >
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item
        label="现存缺陷"
        prop="device_flaw"
        :label-width="formLabelWidth"
      >
        <el-input
          size="mini"
          type="textarea"
          v-model="deviceInfoForm.device_flaw"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="处理建议"
        prop="device_suggest"
        :label-width="formLabelWidth"
      >
        <el-input
          size="mini"
          type="textarea"
          v-model="deviceInfoForm.device_suggest"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="备注"
        prop="device_tips"
        :label-width="formLabelWidth"
      >
        <el-input
          size="mini"
          type="textarea"
          v-model="deviceInfoForm.device_tips"
        ></el-input>
      </el-form-item>
      <el-row>
        <el-col :span="8">
          <el-form-item
            label="责任人"
            prop="device_manager"
            :label-width="formLabelWidth"
          >
            <el-input v-model="deviceInfoForm.device_manager"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closedDialog">取 消</el-button>
      <el-button type="primary" @click="submitDialog">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    dialogVisibleEdit: {
      type: Boolean,
      default: false
    },
    currInfo: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      departmentList: [],
      formLabelWidth: '80px',
      rules: {
        device_name: [
          { required: true, message: '请输入设备名称', trigger: 'blur' }
        ],
        device_count: [
          { required: true, message: '请输入设备数量', trigger: 'blur' }
        ],
        device_department_id: [
          { required: true, message: '请选择所属部门', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    dialogVisibleEdit(val) {
      if (val) {
        this.getDepartmentList()
      }
    }
  },
  computed: {
    deviceInfoForm() {
      return this.currInfo
    }
  },
  methods: {
    // 获取部门候选项
    async getDepartmentList() {
      const { data } = await this.$http.get('/department')
      console.log(data)

      if (data.meta.status === 200) {
        this.departmentList = data.data.departmentList
      } else {
        this.$message.warning(data.meta.msg)
      }
    },
    closedDialog() {
      this.$emit('editDialogClosed')
      // this.$parent.$data.dialogVisibleAdd = false
      this.$refs.ruleForm.resetFields()
    },
    async submitDialog() {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          const {
            data: { meta }
          } = await this.$http.put(
            'devices/' + this.deviceInfoForm.device_id,
            this.deviceInfoForm
          )

          if (meta.status === 201) {
            // 添加成功后，关闭对话框，更新 users 页码表格数据
            this.$message.success(meta.msg)
            this.$emit('editDialogClosed')
            this.$emit('editSuccess')
            this.$refs.ruleForm.resetFields()
          } else {
            this.$message.error(meta.msg)
          }
        } else {
          this.$message.error('填入项未通过验证')
          return false
        }
      })
    }
  }
}
</script>

<style lang="less">
.devices-add {
  .el-dialog__title {
    color: #127ab9;
  }
  .el-form-item__label {
    font-size: 12px;
  }

  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 170px;
  }
}
</style>
